<html>
	<head>
		<link rel="stylesheet" href="css/Estilo.css" type="text/css" />
		<!-- include CSS & JS files -->
		<!-- CSS file -->
		<link rel="stylesheet" type="text/css" href="css/jRating.jquery.css" media="screen" />
		<!--<link type='text/css' href='css/osx.css' rel='stylesheet' media='screen' />-->
		<link rel="stylesheet" href="css/colorbox.css" />
		<!-- jQuery files -->
		<script type="text/javascript" src="jquery/jquery.js"></script>
		<script type="text/javascript" src="jquery/jRating.jquery.js"></script>
		<script type='text/javascript' src='js/jquery.simplemodal.js'></script>
		<!--script type='text/javascript' src='js/osx.js'></script-->
		<script src="js/jquery.colorbox.js"></script>
		<link rel="stylesheet" type="text/css" href="css/demo.css" />
		<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
		<script type="text/javascript" src="js/script.js"></script>
		<link href="css/modern.css" rel="stylesheet"/>
		<link href="css/modern-responsive.css" rel="stylesheet"/>
		<link href="css/site.css" rel="stylesheet" type="text/css"/>
	

	</head>
	<body>
	<div style="width:700px">
	
	<input type="hidden" id="currentComent"/>
	
			<div class="basic" id="12_1"></div>
			<div class="lbox" id="aporte_1">
			
			<!--Info del usuario-->
				<div class="info_user">
					<div align="center">
						<img class="fotos_user_n1" src="images/user_default.jpg" alt=""/>
						<p>Alonso Mejia Estudiante</p>
					</div>
				</div>
				
				<!--Encabezado-->
				<div class="encab_foro">
					<p style="text-align:right">24/12/12</p>
				</div>
				
				<!--Contenido-->
				<div id="content_foro">
					<p>
						Lorem ipsum dolor sit amet, consectetur Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vitae augue ac velit malesuada rhoncus. Donec eros odio, posuere et scelerisque et, blandit ac mauris. Praesent quis tortor sem. Cras ac congue magna. Pellentesque mollis lorem non ipsum elementum adipiscing. Vivamus vehicula, tellus vitae vestibulum viverra.
					</p>
				</div>
				
				<!--Footer-->
				<div align="right">
					<a id="1" class='inline' href="#inline_content">Responder</a>
				</div>
				
			</div>
			
	
		
		</div>	
		
	
		
		<!--Modal form para ingresa el comentario-->
		<div style='display:none'>
			<div id='inline_content' style='padding:10px; background:#fff'>
				<div align="center">
				<strong>Ingrese su mensaje:</strong></br></br>
				<form action="#">
					<textarea class="modalAporte" id="aporte"></textarea>
					<div align="center">
						<input type="submit" value="Enviar" id="ing_coment"/>
					</div>
				</form>
				</div>
			</div>
		</div>


	</body>
	

</html>

<script type="text/javascript">
	$(document).ready(function(){
	
		var prefijoAporte= "aporte_";


		load_rating();
		
		$(".inline").colorbox({inline:true, width:"30%"});
		
		$(".inline").click(function(){
			$('#currentComent').val(prefijoAporte+($(this).attr("id")));
			$('#aporte').val("");
		});
		
		$('#ing_coment').click(function(){
			
			$(".inline").colorbox.close();
			$("#"+$('#currentComent').val()).after(ingresarComent_n1("Aramis Cubillo","Profesor",$('#aporte').val(),"01/01/01"));
			load_rating();
		});
		


	});
	
	
	function ingresarComent_n1(pusuario,prol,pcomentario,pfecha){
	
	var divN1="<div class='basic' id='8_2'></div>"+
		"<div class='lbox_n2' id='c2'>"+
				"<div class='info_user_n2'>"+
					"<div align='center'>"+
						"<img class='fotos_user_n1' src='images/user_default.jpg' alt=''/>"+
						"<p>"+pusuario+" "+prol+"</p>"+
					"</div>"+
				"</div>"+
				"<div class='encab_foro'>"+
					"<p style='text-align:right'>"+pfecha+"</p>"+
				"</div>"+
				"<div id='content_foro'>"+
					"<p>"+
						pcomentario+
					"</p>"+
				"</div>"+
				"<div align='right'>"+
					"<a class='inline cboxElement' href='#inline_content'>Responder</a>"+
				"</div>"+
		"</div>";
		
		return divN1;
		
		}
		
		
   function load_rating(){
			// more complex jRating call
		$(".basic").jRating({
		step:true,
		length : 5, // nb of stars
		onSuccess : function(){
		alert('Success : your rate has been saved :)');
		}
		});
   
   }	

	
</script>